---
title: plate-components.json
description: Configuration for your project.
---

The `plate-components.json` file holds configuration for your project.

We use it to understand how your project is set up and how to generate components customized for your project.

<Callout className="mt-6">
  Note: The `plate-components.json` file is optional and **only required if you're
  using the CLI** to add components to your project. If you're using the copy
  and paste method, you don't need this file.
</Callout>

You can create a `plate-components.json` file in your project by running the following command:

```bash
npx @udecode/plate-ui@latest init
```

Or you could extend <Link href="https://ui.shadcn.com/docs/components-json">shadcn's `components.json`</Link> if you don't have any conflict.

See the <Link href="/docs/components/cli">CLI section</Link> for more information.

## $schema

You can see the JSON Schema for `plate-components.json` <Link href="https://platejs.org/schema.json">here</Link>.

```json title="plate-components.json"
{
  "$schema": "https://platejs.org/schema.json"
}
```

## style

The style for your components. **This cannot be changed after initialization.**

```json title="plate-components.json"
{
  "style": "default"
}
```

## tailwind

Configuration to help the CLI understand how Tailwind CSS is set up in your project.

See the <Link href="/docs/installation">installation section</Link> for how to set up Tailwind CSS.

### tailwind.config

Path to where your `tailwind.config.js` file is located.

```json title="plate-components.json"
{
  "tailwind": {
    "config": "tailwind.config.js" | "tailwind.config.ts"
  }
}
```

### tailwind.css

Path to the CSS file that imports Tailwind CSS into your project.

```json title="plate-components.json"
{
  "tailwind": {
    "css": "src/styles/globals.css"
  }
}
```

### tailwind.baseColor

This is used to generate the default color palette for your components. **This cannot be changed after initialization.**

```json title="plate-components.json"
{
  "tailwind": {
    "baseColor": "slate" | "gray" | "neutral" | "stone" | "zinc"
  }
}
```

### tailwind.cssVariables

You can choose between using CSS variables or Tailwind CSS utility classes for theming.

To use utility classes for theming set `tailwind.cssVariables` to `false`. For CSS variables, set `tailwind.cssVariables` to `true`.

```json title="plate-components.json"
{
  "tailwind": {
    "cssVariables": `true` | `false`
  }
}
```

For more information, see the <Link href="/docs/theming">theming docs</Link>.

**This cannot be changed after initialization.** To switch between CSS variables and utility classes, you'll have to delete and re-install your components.

### tailwind.prefix

The prefix to use for your Tailwind CSS utility classes. Components will be added with this prefix.

```json title="plate-components.json"
{
  "tailwind": {
    "prefix": "tw-"
  }
}
```

## rsc

Whether or not to enable support for React Server Components.

The CLI automatically adds a `use client` directive to client components when set to `true`.

```json title="plate-components.json"
{
  "rsc": `true` | `false`
}
```

## aliases

The CLI uses these values and the `paths` config from your `tsconfig.json` file to place generated components in the correct location.

Path aliases have to be set up in your `tsconfig.json` file.

<Callout className="mt-6">
  **Important:** If you're using the `src` directory, make sure it is included
  under `paths` in your `tsconfig.json` file.
</Callout>

### aliases.components

Import alias for your components.

```json title="plate-components.json"
{
  "aliases": {
    "components": "@/components"
  }
}
```


### aliases.plate-ui

Import alias for `plate-ui` components. If not defined, uses `aliases.ui`, or `aliases.components`. 

The CLI will use this value to determine where to place your UI components. Use this config if you want to customize the installation directory for your UI components.

```json title="plate-components.json"
{
  "aliases": {
    "plate-ui": "@/components/plate-ui"
  }
}
```